<template>
	<view class="address-wrap" id="address">
		<view style="
		 padding:22rpx;
		 position: fixed;
		 width: 95%;
		 box-sizing: content-box;
		 top: 0;
		 background: rgb(255, 255, 255);
		 margin-bottom: 22px;
		 border-bottom: #ebebeb61 solid;">
			<u-search shape="round" :placeholder="citytext" v-model="countryNm" @custom="butSearch" search="butSearch">
			</u-search>
			<view style="height: 180rpx;">
				<view class="caption"><text @tap="commoncity" >常用城市</text></view>
				<view class="gird" >
					<view class="gird-item" v-for="(v, k) of CityInfoData" :key="k">
						<view @click="hotCitySelectHandler(v)" style="font-size: 26upx;">{{ v.cityNm }}</view>
					</view>
				</view>
			</view>
			<view>
				<uni-breadcrumb separator=">" v-if="cityList.length>0" style="padding-top: 20rpx;width: 100%;">
					<uni-breadcrumb-item v-for="(route,indexA) in cityList" :key="indexA">
						<view class="" style="display: flex;" @click="chooseCityHandle(route,indexA)">
							<u-icon v-if="cityIndex==indexA" name="map-fill" color="#03a7ff" size="14"></u-icon>
							<view class="">{{route.countryNm}}</view>
						</view>
					</uni-breadcrumb-item>
				</uni-breadcrumb>
			</view>
		</view>

		<!-- 搜索输入框-end -->
		<template v-if="!isSearch">
			<!-- 城市列表-start -->
			<view class="address-scroll">
				<view class="address-choosecity">
					<view class="address-choosecity-title"></view>
					<view class="address-choosecity-con">
						<template v-for="(item,index) in CityList">
							<view class="address-choosecity-item" :key="index" :id="index">
								<view class="choosecity-item-title">{{index}}</view>
								<template v-for="value in item">
									<view class="choosecity-item-li" :key="value.countryNm"
										@click="chooseCityHandle(value)">{{value.countryNm}}</view>
								</template>
							</view>
						</template>
					</view>
				</view>

			</view>
			<!-- 城市列表-end -->
			<!-- 对应字母 -->
			<view class="address-letter">
				<template v-for="(item,index) in CityList">
					<view class="address-letter-item" :key="index" @click="scrollHandle(index)">{{index}}</view>
				</template>
			</view>
		</template>
		<!-- 搜索 -->
		<template v-else>
			<view class="search-content">
				<block v-if="searchTotalList.length>0">
					<view class="search-con-item" v-for="item in searchTotalList" :key="item.countryId"
						@click="chooseCityHandle(item)">{{item.countryNm}}</view>
				</block>
				<block v-else>
					<view class="search-total">无结果</view>
				</block>

			</view>
		</template>
	</view>
</template>
<script>
	import {
		pinyin
	} from 'pinyin-pro';
	export default {
		data() {
			return {
				cityData: [],
				CityInfoData: [],
				SearchList: [], //查询数组
				CityList: {}, //根据拼音排序的城市数据
				windowTop: 0,
				isSearch: false, //是否显示搜索内容，默认：false
				searchTotalList: [], //搜索结果
				getUrl: {
					country: "/gateway/basedata/mp/dbsap/basedata/country/queryList.do",
					province: "/gateway/basedata/mp/dbsap/basedata/province/queryList.do",
					city: "/gateway/basedata/mp/dbsap/basedata/city/queryList.do"
				},
				getUrlDe: '',
				countryNm: "", //查询字段
				citytext: "国家名称",
				cityIndex: 0,
				provinceType: '',
				provinceParams: {
					pageIndex: 1,
					pageSize: 10000,
					total: 0,
					countryId: "",
					provinceId: "",
					provinceType: 1
				},
				cityParams: {
					pageIndex: 1,
					pageSize: 10000,
					total: 0,
					provinceId: "",
					areakindId: "",
					cityNm: "",
					cityType: ''
				},
				countryParams: {
					pageIndex: 1,
					pageSize: 10000,
					total: 0,
					countryNm: "",
				},
				cityList: [{
					countryId: '',
					countryNm: '国际'
				}],
				name:0,
				tripIndex:0,
			};
		},
		onLoad(e) {	
			if(e.name){
				this.name = e.name;
				this.tripIndex = e.trip;

			}
			if(e.cityType == '1'){
				this.provinceParams.provinceType = 2;
				this.cityIndex = 0;
			}else{
				this.provinceParams.provinceType = 1;
				this.cityList.push({
					countryId: 'CHN',
					countryNm: '中国'
				})
				this.cityIndex = 1;
			}
			this.getCityDate();
			this.getCityInfoData();
		},
		onShow() {
			//获取手机系统信息
			const systemInfo = uni.getSystemInfoSync();
			// #ifdef H5 || APP-PLUS || MP-ALIPAY
			this.windowTop = systemInfo.windowTop
			// #endif
		},
		methods: {
			getCityInfoData(){
				let _this = this;
				if(_this.$oaconfig.cityData.cityInfoList.length > 0){
					_this.CityInfoData= _this.$oaconfig.cityData.cityInfoList;
					return;
				}
				let params= {
					pageIndex: 1,
					pageSize: 9,
					total: 0,
					provinceId: "",
					areakindId: "",
					cityNm: "",
					cityType: ''
				}
				_this.$lyRequest.get(_this.getUrl.city, params, ).then(data => {
					if (data.data.result == "1") {
						_this.CityInfoData= data.data.rows;
						_this.$oaconfig.cityData.cityInfoList= data.data.rows;
					}
				})
			},
			switchHandle() {
				switch (this.cityIndex) {
					case 0:
						this.getUrlDe = this.getUrl.country;
						this.params = this.countryParams;
						this.citytext = "国家名称";
						break;
					case 1:
						this.getUrlDe = this.getUrl.province;
						this.params = this.provinceParams;
						this.citytext = "省份名称";
						break;
					case 2:
						this.getUrlDe = this.getUrl.city;
						this.params = this.cityParams;
						this.citytext = "城市名称";
						break;
				}
			},
			getCityDate() {
				let _this = this;
				if(_this.$oaconfig.cityData.provinceNmCityList.length > 0 && _this.cityIndex == 1){
					_this.cityData = _this.$oaconfig.cityData.provinceNmCityList;
					_this.provinceNmCityData();
					return;
				}
				clearTimeout(_this.timer) //清除延时器
				_this.switchHandle();
				_this.timer = setTimeout(() => { //重新开启新的延时器
					_this.$lyRequest.get(_this.getUrlDe, _this.params, ).then(data => {
						if (data.data.result == "1") {
							_this.cityData = data.data.rows;
							switch (_this.cityIndex) {
								case 0:
									_this.dealwithCityData();
									break;
								case 1:
									_this.provinceNmCityData();
									_this.$oaconfig.cityData.provinceNmCityList= data.data.rows;
									break;
								case 2:
									_this.getCityData();
									break;
							}
						}
					})
				}, 500)
			},
			//处理国家数据
			dealwithCityData() {
				let tempCityList = {}; //临时城市数据
				const cityData = this.cityData;
				for (let i = 0; i < cityData.length; i++) {
					if (tempCityList[cityData[i].countryNm] == undefined) {
						tempCityList[cityData[i].countryNm] = [];
					}
					tempCityList[cityData[i].countryNm].push({
						countryId: cityData[i].countryId,
						countryNm: cityData[i].countryNm
					})
				}
				//把数据转换成拼音
				let tempPinYinList = {}; //临时拼音数据
				for (let i in tempCityList) {
					let py = pinyin(i.substring(0, 1), {
						pattern: 'first',
						toneType: 'none'
					}).toUpperCase();
					if (tempPinYinList[py] == undefined) {
						tempPinYinList[py] = [];
					}
					tempPinYinList[py].push(tempCityList[i][0])
				}
				//对数据进行排序
				this.CityList = this.objKeySort(tempPinYinList);
				//生成查询数组
				let tempSearchList = [];
				for (let i in this.CityList) {
					for (let j = 0; j < this.CityList[i].length; j++) {
						tempSearchList.push(this.CityList[i][j])
					}
				}
				this.SearchList = tempSearchList;
			},
			//处理省份数据
			provinceNmCityData() {
				let tempCityList = {}; //临时城市数据
				const cityData = this.cityData;
				for (let i = 0; i < cityData.length; i++) {
					if (tempCityList[cityData[i].provinceNm] == undefined) {
						tempCityList[cityData[i].provinceNm] = [];
					}
					tempCityList[cityData[i].provinceNm].push({
						countryId: cityData[i].provinceId,
						countryNm: cityData[i].provinceNm
					})
				}
				//把数据转换成拼音
				let tempPinYinList = {}; //临时拼音数据
				for (let i in tempCityList) {
					let py = pinyin(i.substring(0, 1), {
						pattern: 'first',
						toneType: 'none'
					}).toUpperCase();
					if (tempPinYinList[py] == undefined) {
						tempPinYinList[py] = [];
					}
					tempPinYinList[py].push(tempCityList[i][0])
				}
				//对数据进行排序
				this.CityList = this.objKeySort(tempPinYinList);
				//生成查询数组
				let tempSearchList = [];
				for (let i in this.CityList) {
					for (let j = 0; j < this.CityList[i].length; j++) {
						tempSearchList.push(this.CityList[i][j])
					}
				}
				this.SearchList = tempSearchList;
			},
			//处理城市数据
			getCityData() {
				let tempCityList = {}; //临时城市数据
				const cityData = this.cityData;
				for (let i = 0; i < cityData.length; i++) {
					if (tempCityList[cityData[i].cityNm] == undefined) {
						tempCityList[cityData[i].cityNm] = [];
					}
					tempCityList[cityData[i].cityNm].push({
						countryId: cityData[i].cityId,
						countryNm: cityData[i].cityNm
					})
				}
				//把数据转换成拼音
				let tempPinYinList = {}; //临时拼音数据
				for (let i in tempCityList) {
					let py = pinyin(i.substring(0, 1), {
						pattern: 'first',
						toneType: 'none'
					}).toUpperCase();
					if (tempPinYinList[py] == undefined) {
						tempPinYinList[py] = [];
					}
					tempPinYinList[py].push(tempCityList[i][0])
				}
				//对数据进行排序
				this.CityList = this.objKeySort(tempPinYinList);
				//生成查询数组
				let tempSearchList = [];
				for (let i in this.CityList) {
					for (let j = 0; j < this.CityList[i].length; j++) {
						tempSearchList.push(this.CityList[i][j])
					}
				}
				this.SearchList = tempSearchList;
			},
			objKeySort(obj) {
				//排序的函数
				var newkey = Object.keys(obj).sort();
				//先用Object内置类的keys方法获取要排序对象的属性名，再利用Array原型上的sort方法对获取的属性名进行排序，newkey是一个数组
				var newObj = {}; //创建一个新的对象，用于存放排好序的键值对
				for (var i = 0; i < newkey.length; i++) { //遍历newkey数组
					newObj[newkey[i]] = obj[newkey[i]]; //向新创建的对象中按照排好的顺序依次增加键值对
				}
				return newObj; //返回排好序的新对象
			},
			//点击字母滚动事件
			scrollHandle(index) {
				const query = uni.createSelectorQuery().in(this);
				uni.createSelectorQuery().select("#address").boundingClientRect(data => {
					uni.createSelectorQuery().select("#" + index).boundingClientRect((res) => {
						uni.pageScrollTo({
							duration: 100,
							scrollTop: res.top - data.top - 160, //滚动到实际距离是元素距离顶部的距离减去最外层盒子的滚动距离
						})
					}).exec()
				}).exec();
			},
			//选择城市
			chooseCityHandle(params, index) {
				if (index !== undefined&&(index == 0 || index>0)) {
					this.cityList.splice(index + 1);
					if (params.countryId == "") {
						this.cityIndex = 0;
						this.getCityDate();
					} else if(index == 1){
						if (params.countryId == "CHN" ) {
							this.cityIndex = 1;
							this.provinceParams = {
								pageIndex: 1,
								pageSize: 10000,
								total: 0,
								countryId: params.countryId,
								provinceId: "",
								provinceType: 1
							};
							this.getCityDate();
						} else{
							this.cityIndex = 1;
							this.provinceParams = {
								pageIndex: 1,
								pageSize: 10000,
								total: 0,
								countryId: params.countryId,
								provinceId: "",
								provinceType: 2
							};
							this.getCityDate();
						}
					} else{
						this.cityParams = {
								pageIndex: 1,
								pageSize: 10000,
								total: 0,
								provinceId: params.countryId,
								areakindId: "",
								cityNm: "",
								cityType: ''
							},
							this.cityIndex = 2
						this.getCityDate();
					}
				} else {
					this.cityList.push(params);
					if (params.countryId == "CHN" && this.cityIndex == 0) {
						this.cityIndex = 1;
						this.provinceParams = {
							pageIndex: 1,
							pageSize: 10000,
							total: 0,
							countryId: params.countryId,
							provinceId: "",
							provinceType: 1
						};
						this.getCityDate();
					} else if (params.countryId !== "CHN" && this.cityIndex == 0) {
						this.cityIndex = 1;
						this.provinceParams = {
							pageIndex: 1,
							pageSize: 10000,
							total: 0,
							countryId: params.countryId,
							provinceId: "",
							provinceType: 2
						};
						this.getCityDate();
					} else if (this.cityIndex == 1) {
						this.cityParams = {
								pageIndex: 1,
								pageSize: 10000,
								total: 0,
								provinceId: params.countryId,
								areakindId: "",
								cityNm: "",
								cityType: ''
							},
							this.cityIndex = 2
						this.getCityDate();
					}else{
						let pages = getCurrentPages();
						let prePage = pages[pages.length - 2];
						prePage.$vm.travelAppList.busiTripRouteEntityList[this.tripIndex][this.name]=params.countryNm;
						uni.navigateBack();
					}
				}
			},
			//选择常用城市
			hotCitySelectHandler(params){
				let pages = getCurrentPages();
				let prePage = pages[pages.length - 2];
				prePage.$vm.travelAppList.busiTripRouteEntityList[this.tripIndex][this.name]=params.cityNm;
				uni.navigateBack();
			}
		}
	}
</script>
<style lang="scss" scoped>
	.address-wrap {
		margin: 24rpx auto;
		display: flex;
		flex-direction: column;

		// 搜索输入框
		.search-wrap {
			position: fixed;
			left: 0;
			right: 0;
			z-index: 3;
			background-color: #fff;

			.searchInfor-input {
				border-radius: 32rpx;
				width: 91.47%;
				height: 62rpx;
				display: flex;
				flex-direction: row;
				background: #f5f5f5;
				align-items: center;
				font-size: 28rpx;
				color: #000;
				margin: auto;

				.search-icon {
					margin-left: 29rpx;
				}

				.searchInfor-text {
					height: 100%;
					flex: 1;
					margin: 0 32rpx 0 16rpx;
					font-weight: 400;
				}
			}
		}

		//城市筛选区
		.address-scroll {
			padding: 10rpx 20rpx;
			display: flex;
			flex-direction: column;

			.address-currentcity {
				display: flex;
				flex-direction: column;

				.address-currentcity-title {
					font-size: 30rpx;
					font-family: Source Han Sans CN;
					font-weight: 400;
					color: #999999;
					margin-top: 31rpx;
				}

				.address-currentcity-name {
					font-size: 28rpx;
					font-family: Source Han Sans CN;
					font-weight: 400;
					color: #000;
					margin-top: 40rpx;
				}
			}

			//选择城市
			.address-choosecity {
				display: flex;
				flex-direction: column;

				.address-choosecity-title {
					font-size: 30rpx;
					font-family: Source Han Sans CN;
					font-weight: 400;
					color: #999999;
					margin-top: 300rpx;
				}

				.address-choosecity-con {
					display: flex;
					flex-direction: column;

					.address-choosecity-item {
						display: flex;
						flex-direction: column;

						.choosecity-item-title {
							font-size: 30rpx;
							font-family: Source Han Sans CN;
							font-weight: 400;
							color: #000;
							margin-top: 70rpx;
						}

						.choosecity-item-li {
							font-size: 28rpx;
							font-family: Source Han Sans CN;
							font-weight: 400;
							color: #000;
							margin-top: 45rpx;
						}
					}
				}
			}

		}

		//字母
		.address-letter {
			position: fixed;
			top: 400rpx;
			right: 17.5px;
			display: flex;
			flex-direction: column;
			z-index: 10;
			font-size: 24rpx;
			font-family: Source Han Sans CN;
			font-weight: bold;
			color: #000;
			align-items: center;

			.address-letter-item {
				margin-bottom: 30rpx;
			}
		}

		.search-content {
			display: flex;
			flex-direction: column;
			margin-top: 24rpx;
			margin-bottom: 24rpx;

			.search-con-item {
				border-bottom: 2rpx solid rgba(254, 254, 254, .2);
				height: 70rpx;
				line-height: 70rpx;
				font-size: 28rpx;
				font-family: Source Han Sans CN;
				font-weight: 400;
				color: #000;
			}

			.search-total {
				height: 200rpx;
				display: flex;
				font-size: 28rpx;
				font-family: Source Han Sans CN;
				font-weight: 400;
				color: #FEFEFE;
				justify-content: center;
				align-items: center;
			}
		}
		.gird{
			.gird-item{
				margin: 10rpx 20rpx;
				padding: 4rpx 20rpx;
				float: left;
				background: #f5f5f5;
				border-radius: 4rpx;
			}
		}
		.caption{
			padding-top: 20rpx;
			padding-bottom: 10rpx;
			font-size: 26rpx;
			color: #6a6a6a;
		}
	}
</style>
